sannongzixunwang_web/pages/newsDetail/[id].vue

<template>
    <!-- 页面头部 -->
    <HomePageHead></HomePageHead>
    <!-- 导航栏 -->
    <HomePageNavigation1></HomePageNavigation1>
    <!-- 列表页广告一 -->
    <HomeTopTen :imgurl="adList[0]" v-if="adList[0]"></HomeTopTen>
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
        <div class="inner">
            <span class="location">当前位置:</span>
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: `/newsList/${routLevelId}` }">{{ routLevelTitle }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{ routeNewsTtitle }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
    <!-- 资讯列表 -->
    <div class="newsDetail">
        <div class="inner">
            <div class="innerLeft">
                <div class="LeftTop">
                    <h1>{{ newsDetail.title }}</h1>
                    <p>
                        来源: <span>{{ newsDetail.copyfrom }}</span>
                        作者: <span>{{ newsDetail.author }}</span>
                        发布时间: <span>{{ time }}</span>
                    </p>
                    <img :src="newsDetail.imgurl" alt="">
                </div>
                <div class="leftBottom" v-html="newsDetail.content"></div>
                <!-- 免责声明: -->
                <div class="disclaimer" v-if="newsDetail.fromurl">
                    <p>原文链接：{{ newsDetail.fromurl }}</p>
                    <p>[免责声明]本文来源于网络转载，仅供学习交流使用，不构成商业目的。 版权归原作者所有，如涉及作品内容，版权和其他问题，请在30日与本网联系，我们将第一时间处理。</p>
                </div>
            </div>
            <div class="innerRight">
                <!-- 热点资讯1 -->
                <div class="hotList1">
                    <DetailHotNews></DetailHotNews>
                </div>
                <!-- 热点资讯2 -->
                <div class="hotList2">
                    <DetailHotNews2></DetailHotNews2>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面底部 -->
    <HomeFoot1></HomeFoot1>
</template>

<script setup>
//1.页面依赖 start ---------------------------------------->
import { onMounted } from 'vue'
import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'

const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;

//获得跳转过来的id
const route = useRoute();
const articleId = route.params.id; //获得该页面的id
//1.页面依赖 end ---------------------------------------->

//2.页面数据 start ---------------------------------------->
//2.1 资讯详情
const newsDetail = ref({})
const routeNewsTtitle = ref("");
//2.2 发布日期
const time = ref("");
//2.3 路径
const routLevelTitle = ref("");
const routLevelId = ref("");
//2.4获取详情
async function getPageData() {
    const { data: mkdata, error: mkdataError } =  requestData('/web/selectWebsiteArticleInfo', {
        method: 'GET',
        query: {
            'articleid': articleId
        },
    });
    if (mkdataError.value) {
        //console.log()
    } else {
        if (mkdata.value) {
            newsDetail.value = mkdata.value.data;
            routLevelTitle.value = newsDetail.value.cat_name;
            routLevelId.value = newsDetail.value.category_id;
            time.value = newsDetail.value.updated_at.split(' ')[0]
            if (newsDetail.value.title.length >= 30) {
                routeNewsTtitle.value = newsDetail.value.title.substr(0, 30) + "...";
            } else {
                routeNewsTtitle.value = newsDetail.value.title
            }

        }
    }
}
getPageData();

//2.5 获得广告
let adList = ref([]);
const {data:adData,error:adError} = requestData('/web/getWebsiteAdvertisement',{method:'GET',query:{'ad_tag':'DETAIL'}});
if (adError.value) {
    console.error('广告列表请求失败:', adError.value);
} else {
    //当有值了以后再放进去，万恶之源，也是nuxt2和3都存在的一个问题，也许nuxt4会解决这个问题
    if (adData.value && adData.value.data) {
        console.log(6688)
        adList.value = adData.value.data;
        console.log(adData.value.data)
    }
}
//2.页面数据 end ---------------------------------------->

//3.设置seo信息 start---------------------------------------->
//3.1 设置seo信息
async function getSeo() {
    const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
        method: 'GET',
        query: {
            'articleid':articleId
        },
    });
    seoSetup(setData.data.title,setData.data.introduce,setData.data.keywords)
}
getSeo();
//4.设置seo信息 end---------------------------------------->
</script>

<style lang="less" scoped>
@import url('@/assets/css/detail.less');
</style>